<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.axios_test</title>
		<script type="text/javascript" src="./js/axios.js"></script>
	</head>
	<body>
		<button onclick="test1()">获取所有人(get请求-不传参数)</button> <br><br>
		<button onclick="test2()">通过 id 获取一个人(get请求-query参数)</button> <br><br>
		<button onclick="test3()">通过 age 获取一堆人(get请求-params参数)</button> <br><br>
		<button onclick="test4()">添加一个人(post请求-请求体参数)</button> <br><br>
		<button onclick="test5()">更新一个人(put请求-请求体参数)</button> <br><br>
		<button onclick="test6()">删除一个人(delete请求-请求体参数)</button> <br><br>

		<script type="text/javascript" >
			//请求拦截器
			axios.interceptors.request.use((config)=>{
				config.baseURL = 'http://localhost:5000'
				return config
			})
			
			//响应拦截器
			axios.interceptors.response.use(
				//响应成功的回调
				res =>{
					// console.log('响拦截器-成功的回调，执行了')
					return res.data
				},
				//响应失败的回调
				err =>{
					// console.log('响拦截器-失败的回调，执行了')
					alert(err)
					return new Promise(()=>{})
				}
			)

			async function test1(){
				//简单写法
				// let result = await axios.get('/persons')

				//完整写法
				let result = await axios({
					url:'/persons',
					method:'GET'
				})

				console.log('成功了',result)
				
			}
		
			async function test2(){
				//简单写法，query参数直接拼在路径中
				// let result = await axios.get('/person?id=1618480602480')

				//简单写法，靠配置项，指定query参数，携带query参数时，配置项叫params！！！！
			/* 	let result = await axios.get('/person',{
					params:{
						id:'1618480602480'
					}
				}) */

				//完整写法
				let result = await axios({
					url:'/person',
					method:'GET',
					params:{
						id:'1618480602480'
					}
				})

				console.log(result)
			}
			
			async function test3(){
				//简单写法，只能自己拼
				// let result = await axios.get('/filter/19')

				//完整写法
				let result = await axios({
					url:'/filter/19',
					method:'GET'
				})
				console.log(result)
			}
			
			async function test4(){
				//简单写法，json编码的请求参数
				// let result = await axios.post('/person',{name:'强哥',age:28})

				//简单写法，urlencoded编码的请求参数
				// let result = await axios.post('/person','name=老八&age=32')

				//完整写法
				let result = await axios({
					url:'/person',
					method:'POST',
					data:'name=老三&age=39'
				})

				console.log(result)
			}
			
			async function test5(){
				//简单写法,json编码的请求参数
				// let result = await axios.put('/person',{id:'1651717667989',name:'张强哥哥',age:37})
				
				//简单写法,urlencoded编码的请求参数
				// let result = await axios.put('/person','id=1651717667989&name=张强哥哥666&age=40')

				// 完整写法
				let result = await axios({
					url:'/person',
					method:'PUT',
					data:{id:'1651717667989',name:'最帅的强哥',age:10}
				})

				console.log(result)
			}

			async function test6(){
				//简单写法,json编码的请求参数
				// let result = await axios.delete('/person',{data:{id:'1651718149608'}})

				// 完整写法
				let result = await axios({
					url:'/person',
					method:'DELETE',
					data:{
						id:'1618480594484'
					}
				})

				console.log(result)
			}
		</script>
	</body>
</html>